<template>
  <div class="img_box"
  id="dragImgBox"
  :style="{
  height:rectBox.height + 'px',
  width:rectBox.width + 'px'
  }"
@dragstart.prevent="drag"
  >
<img
:style="{
    top:slider.y +'px',
    left:slider.x + 'px',
    transform: `scale(${scale})`,
    translate: `${translate.x}px ${translate.y}px`
}"
@load="handleImageLoaded"
id="dragImg"
@wheel.prevent="handleWheel"
@mouseleave="mouseleave"
  @mouseup="mouseup"
  @mousemove="mousemove"
@mousedown="mousedown"
@dragstart.prevent="drag"


:src="src" />
  </div>
  <!-- translate: `${slider.x}px ${slider.y}px` -->
</template>

<script setup>
import { nextTick, reactive,ref} from "vue"
const props = defineProps({
  src: {
    type: String,
    default: "",
  },
})
import { onMounted } from 'vue'
const flag = ref('')
const mousedownPage = reactive({
    x:0,
    y:0
})
const scale = ref(1)
const slider = reactive({
    x:0,
    y:0
})
const translate = reactive({
    x:0,
    y:0,
})
const rectBox=reactive({
    width:500,
    height:300,
    maxWidth:300,
    maxHeight:300,
    minHeight:100,
    minWidth:100
})
let scaleRatio = 1
function getElement(params) {
    let img = document.getElementById('dragImg')
    let imgBox =document.getElementById('dragImgBox')
    return{
        imgHeight:img.offsetHeight,
        imgBoxHeight:imgBox.offsetHeight,
        imgWidth:img.offsetWidth,
        imgBoxWidth:imgBox.offsetWidth,
        imgLeft:img.offsetLeft,
        imgBoxLeft:imgBox.offsetLeft,
        imgTop:img.offsetTop,
        imgBoxTop:imgBox.offsetTop
    }
}
function handleWheel(e) {
    const {imgBoxWidth,imgWidth,imgBoxHeight,imgHeight} = getElement()
   let maxScale = 4
   let minScale = Math.max(imgBoxWidth/imgWidth,imgBoxHeight/imgHeight)
   console.log('minScale',minScale)
    const delta = e.deltaY > 0 ? -0.1 : 0.1
  const newScale = Math.min(Math.max(scale.value + delta, minScale), maxScale)
   scaleRatio = newScale / scale.value
  scale.value = newScale

  translate.x =-((imgWidth- imgWidth*scale.value)/4)
  translate.y = -((imgHeight-imgHeight*scale.value)/4)
  sliderChange(slider)
}
function mousemove(event) {
    if (flag.value==='') return

    const data  ={
        x:event.pageX-mousedownPage.x,
        y:event.pageY-mousedownPage.y
    }

    sliderChange(data)
}
function sliderChange(data) {
    const {imgBoxWidth,imgWidth,imgBoxHeight,imgHeight} = getElement()
    let maxX = (imgBoxWidth - imgWidth*scale.value)+translate.x
    let maxY = (imgBoxHeight-imgHeight*scale.value)+translate.y

    slider.x = data.x>0?0:data.x<maxX?maxX:data.x
    slider.y = data.y>0?0:data.y<maxY?maxY:data.y
}
function mousedown(event) {
    flag.value  = 'move'
    mousedownPage.x = event.pageX-slider.x;
    mousedownPage.y = event.pageY-slider.y;
}
function mouseleave(event) {
    flag.value = ''

}
function mouseup(event) {
    flag.value = ''
}
function handleImageLoaded(params) {

    creatBox(params.width,params.height)
}
function creatBox() {

    const {imgHeight,imgWidth} = getElement()
console.log(imgHeight,imgWidth)

const maxw = Math.min(imgWidth,rectBox.maxWidth)
const minw = Math.max(imgWidth,rectBox.minWidth)
let width = imgWidth>rectBox.maxWidth?maxw:minw
const maxh = Math.min(imgHeight,rectBox.maxHeight)
const minh = Math.max(imgHeight,rectBox.minimgHeight)
let height = imgHeight>rectBox.maxHeight?maxh:minh
let ratio = width*height;
let oldRadio = imgWidth / imgHeight
if(width>=height){
    width = height*oldRadio
    console.log(88,width,oldRadio)
}else{
    height = width/oldRadio
}

rectBox.width  = width;
rectBox.height = height;
let img = document.getElementById('dragImg')
img.style.width = width + 'px'
img.style.height = height + 'px'
}
onMounted(()=>{
    nextTick(()=>{
        //    creatBox()
    })

})
</script>

<style scoped>
.img_box{
    /* width: 500px;
    height: 200px; */
    overflow: hidden;
    position: absolute;
    background-color: aqua;
    margin-left: 50px;
}
img{
    /* width: 700px;
    height: 400px; */
    /* width: 100%;
    height: 100%; */
    position: absolute;
    left: -10%;
    top: -10%;
    transform-origin: center;
}
</style>